<template>
  <t-dialog
    header="修改链"
    :visible.sync="showDialog"
    @confirm="saveForm"
    width="70%"
    :cancelBtn="null"
    :confirmBtn="null"
  >
    <t-card :bordered="false">
      <div class="form-step-container">
        

        <!-- 分步表单1 -->
        <t-form
          v-show="true"
          class="step-form"
          :data="formData1"
          :rules="rules"
          labelAlign="right"
        >
          <t-form-item label="区块链名称" name="chain_config_name">
            <t-input
              :style="{ width: '480px' }"
              v-model="formData1.chain_config_name"
              placeholder="请输入链名称"
            ></t-input>
          </t-form-item>
          <t-form-item label="账户模式" name="authType">
            <t-select
              :style="{ width: '390px' }"
              v-model="formData1.authType"
              class="demo-select-base"
              clearable
            >
              <t-option
                v-for="(item, index) in authtypeOptions"
                :value="item.value"
                :label="item.label"
                :key="index"
              >
                {{ item.label }}
              </t-option>
            </t-select>
            
          </t-form-item>

          <t-form-item label="加密算法" name="hash_type">
            <t-select
              :style="{ width: '390px' }"
              v-model="formData1.hash_type"
              class="demo-select-base"
              clearable
            >
              <t-option
                v-for="(item, index) in hashtypeOptions"
                :value="item.value"
                :label="item.label"
                :key="index"
              >
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="共识算法" name="consensus_type">
            <t-select
              :style="{ width: '390px' }"
              v-model="formData1.consensus_type"
              class="demo-select-base"
              clearable
            >
              <t-option
                v-for="(item, index) in consensusOptions"
                :value="item.value"
                :label="item.label"
                :key="index"
              >
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="开启gas" name="gas_enable">
            <t-switch
              size="large"
              v-model="formData1.gas_enable"
              @change="onChange"
            ></t-switch>
          </t-form-item>
        </t-form>

        <!-- 分步表单2 -->
        <t-form
          v-show="true"
          class="step-form"
          :data="formData2"
          :rules="rules"
          labelAlign="right"
        >
          <t-divider>区块配置</t-divider>
          <t-form-item label="区块容量" name="block_tx_capacity">
            <t-input
              :style="{ width: '280px' }"
              v-model="formData2.block_tx_capacity"
              placeholder="请输入区块容量"
            ></t-input>
            <span>txs</span>
          </t-form-item>
          <t-form-item label="区块大小" name="block_size">
            <t-input
              :style="{ width: '280px' }"
              v-model="formData2.block_size"
              placeholder="请输入区块大小"
            ></t-input>
            <span>MB</span>
          </t-form-item>
          <t-form-item label="出块间隔" name="block_interval">
            <t-input
              :style="{ width: '280px' }"
              v-model="formData2.block_interval"
              placeholder="请输入出块时间间隔"
            ></t-input>
            <span>ms</span>
          </t-form-item>
          <t-divider>交易池配置</t-divider>
          <t-form-item label="交易池类型" name="pool_type">
            <t-select
              :style="{ width: '280px' }"
              v-model="formData2.pool_type"
              class="demo-select-base"
              clearable
            >
              <t-option
                v-for="(item, index) in pooltypeOptions"
                :value="item.value"
                :label="item.label"
                :key="index"
              >
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="交易池容量" name="max_txpool_size">
            <t-input
              :style="{ width: '280px' }"
              v-model="formData2.max_txpool_size"
              placeholder="请输入交易池容量"
            ></t-input>
            <span>txs</span>
          </t-form-item>
          <t-form-item
            label="批次容量"
            name="batch_max_size"
            help="适用batch交易池"
          >
            <t-input
              :style="{ width: '280px' }"
              v-model="formData2.batch_max_size"
              placeholder="请输入批次容量"
            ></t-input>
            <span>txs</span>
          </t-form-item>
          <t-form-item
            label="批次间隔"
            name="batch_create_timeout"
            help="适用batch交易池"
          >
            <t-input
              :style="{ width: '280px' }"
              v-model="formData2.batch_create_timeout"
              placeholder="请输入批次创建时间间隔"
            ></t-input>
            <span>ms</span>
          </t-form-item>

          <t-divider></t-divider>
        </t-form>

        <!-- 分步表单3 -->
        <div v-show="true" class="rule-tips">
          <t-alert theme="info" title="填写自定义配置项：" :close="true">
            <p class="span-txt">
              配置项根据yml的层级关系定义，例如，配置go最大并发数.vm.go.max_concurrency为200的配置方式如下：
            </p>
            <p class="span-txt">配置项：.vm.go.max_concurrency</p>
            <p class="span-txt">配置值：200</p>
            <t-button @click="visible = true">示例</t-button>
            <t-dialog
              header="配置项填写示例"
              :visible.sync="visible"
              :cancelBtn="null"
              :confirm-btn="null"
              :width="800"
              ><p class="span-txt">
                目前底层工具log.yml ,chainmaker.yml,
                bc1.yml三个配置文件的所有配置项修改，常见的配置有：
              </p>
              <t-divider>bc配置</t-divider>
              <p class="span-txt">.block.tx_timeout=500</p>
              <p class="span-txt">.block.block_tx_capacity=10000</p>
              <p class="span-txt">.block.block_size=50</p>
              <p class="span-txt">.block.block_interval=10</p>
              <p class="span-txt">.account_config.enable_gas=true/false</p>
              <p class="span-txt">
                .consensus_type.ext_config=[{"key": "TBFT_blocks_per_proposer",
                "value": "100000000"}]
              </p>
              <t-divider>chainmaker配置</t-divider>
              <p class="span-txt">.crypto_engine = "gmssl"</p>
              <p class="span-txt">.txpool.pool_type = "normal"</p>
              <p class="span-txt">.txpool.max_txpool_size = 2000000</p>
              <p class="span-txt">.txpool.batch_max_size = 10000</p>
              <p class="span-txt">.txpool.batch_create_timeout = 200"</p>
              <p class="span-txt">.tx_filter.type = 3</p>
              <p class="span-txt">.tx_filter.sharding.length = 10</p>
              <p class="span-txt">.monitor.enabled = true</p>
              <p class="span-txt">.pprof.enabled = true</p>
              <p class="span-txt">.storage.logdb_segment_size = 512</p>
              <p class="span-txt">
                .storage.rolling_window_cache_capacity = 550000
              </p>
              <p class="span-txt">.vm.common.max_send_msg_size = 100</p>
              <p class="span-txt">.vm.common.max_recv_msg_size = 100</p>
              <p class="span-txt">.vm.go.max_concurrency = 100</p>
              <p class="span-txt">.vm.java.max_concurrency = 100</p>
            </t-dialog>

            <div slot="message"></div>
          </t-alert>
        </div>
        <t-form
          v-show="true"
          class="step-form"
          :data="formData3"
          :rules="rules"
          labelAlign="left"
        >
          <div
            v-for="(item, index) in formData3.list"
            style="display: flex"
            :key="index"
          >
            <t-form-item name="`list.${index}.operation`">
              <t-select
                :style="{ width: '100px' }"
                v-model="item.operation"
                class="demo-select-base"
                clearable
                placeholder="配置方式"
              >
                <t-option
                  v-for="(item, index) in updateOptions"
                  :value="item.value"
                  :label="item.label"
                  :key="index"
                >
                  {{ item.label }}
                </t-option>
              </t-select>
            </t-form-item>
            <t-form-item name="`list.${index}.config_file_name`">
              <t-select
                :style="{ width: '150px' }"
                v-model="item.config_file_name"
                class="demo-select-base"
                clearable
                placeholder="请选择配置文件"
              >
                <t-option
                  v-for="(item, index) in configfileOptions"
                  :value="item.value"
                  :label="item.label"
                  :key="index"
                >
                  {{ item.label }}
                </t-option>
              </t-select>
            </t-form-item>
            <t-form-item :name="`list.${index}.config_item`">
              <t-input
                :style="{ width: '500px' }"
                v-model="item.config_item"
                placeholder="请输入自定义配置项"
              ></t-input>
            </t-form-item>
            <t-form-item :name="`list.${index}.config_value`">
              <t-input
                :style="{ width: '150px' }"
                v-model="item.config_value"
                placeholder="请输入配置项的值"
              ></t-input>
              <t-button
                v-if="index === formData3.list.length - 1"
                @click="onAddFormItem"
                >+</t-button
              >
              <t-button v-else @click="onDelFormItem(index)">-</t-button>
            </t-form-item>
          </div>
        </t-form>

        <!-- 分步表单4 -->
        <div class="step-form-4" v-show="true">
          <!-- <check-circle-filled-icon style="color: green" size="52px" /> -->

          <div class="button-group">
            <t-space size="100px">
              <t-button @click="saveForm" theme="primary">更新配置</t-button>
            </t-space>
          </div>
        </div>
      </div>
    </t-card>
  </t-dialog>
</template>
<script>
import { CheckCircleFilledIcon } from "tdesign-icons-vue";
import { prefix } from "@/config/global";
import { updateChainConfig } from "@/api/requestApi";


export default {
  name: "FormStep",
  components: {
    CheckCircleFilledIcon,
  },
  props: {
    showChildDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      checked: true,
      prefix,
      formData1: {},

      formData2: {},
      formData3: { list: [] },
      authtypeOptions: [
        { label: 'cert', value: 1 },
        { label: 'pk', value: 2 },
      ],
      pooltypeOptions: [
        { label: 'normal', value: 'normal' },
        { label: 'batch', value: 'batch' },
        { label: 'single', value: 'single' },
      ],
      hashtypeOptions: [
        { label: 'SHA256', value: 'SHA256' },
        { label: 'SM3', value: 'SM3' },
      ],
      consensusOptions: [
        { label: 'TBFT', value: 1 },
        { label: 'MAXBFT', value: 3 },
        { label: 'RAFT', value: 4 },
        { label: 'DPOS', value: 5 },
      ],
      configfileOptions: [
        { label: 'chainmaker.yml', value: 'chainmaker.yml' },
        { label: 'bc1.yml', value: 'bc1.yml' },
        { label: 'log.yml', value: 'log.yml' },
      ],
      updateOptions: [
        { label: 'update', value: 'update' },
        { label: 'new', value: 'new' },
        { label: 'delete', value: 'delete' },
      ],
      rules: {
        name: [{ required: true, message: '请选择链名称', type: 'error' }],
        authType: [{ required: true, message: '请选择身份模式', type: 'error' }],
        hashtype: [{ required: true, message: '请输入加密算法', type: 'error' }],
        consensus: [{ required: true, message: '请输入共识算法', type: 'error' }],
        pool_type: [{ required: true, message: '请输入交易池类型', type: 'error' }],
      },
      activeForm: 0,
    };
  },
  computed: {
    showDialog: {
      get() {
        return this.showChildDialog;
      },
      set(newValue) {
        this.$emit("update:showChildDialog", newValue); // 触发更新事件，父组件的showDialogAdd会自动更新
      },
    },
    amount() {
      if (this.formData1.chain_config_name === "1") {
        return "565421";
      }
      if (this.formData1.chain_config_name === "2") {
        return "278821";
      }
      if (this.formData1.chain_config_name === "3") {
        return "109824";
      }
      return "--";
    },
  },
  methods: {
    init(data) {
      console.log("来自父组件的", data);
      this.data = data;
      // id = data.chain_type_config.id
      console.log("当前配置主表的id", data.chain_type_config.id);
      const INITIAL_DATA1 = {
        chain_config_name: data.chain_type_config.chain_config_name,
        authType: data.chain_type_config.auth_type,
        hash_type: data.chain_type_config.hash_type,
        consensus_type: data.chain_type_config.consensus_type,
        gas_enable: data.chain_type_config.gas_enable === 1,
      };
      this.formData1 = { ...INITIAL_DATA1 };

      const INITIAL_DATA2 = {
        block_tx_capacity: data.chain_performance_config.block_tx_capacity === -1 ? '' : data.chain_performance_config.block_tx_capacity,
        block_size: data.chain_performance_config.block_size === -1 ? '' : data.chain_performance_config.block_size,
        block_interval: data.chain_performance_config.block_interval === -1 ? '' : data.chain_performance_config.block_interval,
        max_txpool_size: data.chain_performance_config.max_txpool_size === -1 ? '' : data.chain_performance_config.max_txpool_size,
        batch_max_size: data.chain_performance_config.batch_max_size === -1 ? '' : data.chain_performance_config.batch_max_size,
        batch_create_timeout: data.chain_performance_config.batch_create_timeout === -1 ? '' : data.chain_performance_config.batch_create_timeout,
        // pool_type: data.chain_performance_config.pool_type === -1 ? '' : data.chain_performance_config.pool_type,
        // block_tx_capacity: data.chain_performance_config.block_tx_capacity,
        // block_size: data.chain_performance_config.block_size,
        // block_interval: data.chain_performance_config.block_interval,
        // max_txpool_size: data.chain_performance_config.max_txpool_size,
        // batch_max_size: data.chain_performance_config.batch_max_size,
        // batch_create_timeout:data.chain_performance_config.batch_create_timeout,
        pool_type: data.chain_performance_config.pool_type,
      };
      this.formData2 = { ...INITIAL_DATA2 };

      this.formData3.list = data.chain_custom_parameters.map((param) => ({
        // id = param.id,
        operation: param.operation,
        config_file_name: param.config_file_name,
        config_item: param.config_item,
        config_value: param.config_value,
      }));
    },
    // onSubmit1({ validateResult }) {
    //   if (validateResult === true) {
    //     this.activeForm = 1;
    //   }
    // },

    onSubmit4() {
      this.$router.replace({ path: "/detail/advanced" });
    },
    onReset4() {
      this.activeForm = 0;
    },
    onChange(val) {
      console.log(val);
    },
    onAddFormItem() {
      console.log(this.formData3);
      this.formData3.list.push({ 
        // id = -10086,
        operation: 'update',
        config_file_name: '',
        config_item: '',
        config_value: '',
       });
    },
    onDelFormItem(index) {
      this.formData3.list.splice(index, 1);
    },
    // 更新配置
    saveForm() {
      const params = {
        type_config: {
          chain_config_name: this.formData1.chain_config_name,
          auth_type: this.formData1.authType,
          hash_type: this.formData1.hash_type,
          consensus_type: this.formData1.consensus_type,
          gas_enable: this.formData1.gas_enable ? 1 : 0,
        },
        performance_config: {
          block_tx_capacity: this.formData2.block_tx_capacity || -1,
          block_size: this.formData2.block_size || -1,
          block_interval: this.formData2.block_interval || -1,
          pool_type: this.formData2.pool_type || -1,
          max_txpool_size: this.formData2.max_txpool_size || -1,
          batch_max_size: this.formData2.batch_max_size || -1,
          batch_create_timeout: this.formData2.batch_create_timeout || -1,
        },
        custom_parameters: this.formData3.list,
      };
      console.log("@@@@@@@@@@@@@@");
      console.log(params);
      this.$request
        .post(updateChainConfig(this.data.chain_type_config.id), params)
        // .post(updateChainConfig(), params)
        .then((res) => {
          if (res.status === 200) {
            this.$message.success("链配置保存成功");
            this.showDialog = false;
            this.$router.push("/performance/chain");
          } else {
            this.$message.fail(res.data);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../index";
</style>
